<template>
	<view v-show="!isSortType" v-if="spikeList.length>0">
		<view class="spike-box" :class="conStyle?'borderRadius20':''"
			:style="{background:'#2F373E',margin:'0 '+prConfig*2+'rpx',marginTop:'20rpx'}">
			<view class="hd">
				<view class="left">
					<view class="name">{{$t(`限时秒杀`)}}</view>
				</view>
				<image class="hot_image" mode="aspectFit" src="https://youzhen.sdshengyue.cn/uploads/attach/2023/09/20230927/2afa69508398dcf627bb78a00a168751.png"></image>
			</view>
			<countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '"
				:second-text="' '" :datatime="datatime" :bgColor="countDownColor" :colors="newColor">
			</countDown>
			<view class="spike-wrapper">
				<scroll-view scroll-y="true" show-scrollbar="false">
					<navigator class="spike-item" :style="'margin-right:'+ lrConfig*2 +'rpx;'"
						v-for="(item,index) in spikeList" :key="index"
						:url="'/pages/activity/goods_seckill_details/index?id='+item.id+'&time='+datatime+'&status=1'"
						hover-class='none'>
						<view class="index_time" style="">
							<view class="time_img">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="time_info">
								<view v-if="titleShow" class="time_info_name">{{item.title}}</view>
								<view style="display: flex;width: 100%;height: 100rpx;padding-top: 20rpx;position: relative;">
									<view class="time_price">
										<text v-if="priceShow"><text>{{$t(`￥`)}}</text>{{item.price}}</text>
										<text v-if="priceShow" style="text-decoration: line-through;color: #ccc;font-size: 28rpx;margin-left: 20rpx;"><text>{{$t(`￥`)}}</text>{{item.ot_price}}</text>
									</view>
									<view class="time_btn">
										马上抢
									</view>
								</view>
								
							</view>
						</view>

					</navigator>
				</scroll-view>
			</view>
		</view>
	</view>

</template>

<script>
	import countDown from '@/components/countDown';
	import {
		getSeckillIndexTime,
		getSeckillList
	} from '@/api/activity.js';
	export default {
		name: 'seckill',
		components: {
			countDown
		},
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isSortType: {
				type: String | Number,
				default: 0
			}
		},
		data() {
			return {
				datatime: '',
				newColor:'rgba(33, 33, 33, 1)',
				spikeList: [],
				countDownColor: this.dataConfig.countDownColor.color[0].item,
				themeColor: this.dataConfig.themeColor.color[0].item,
				numberConfig: this.dataConfig.numberConfig.val,
				lrConfig: this.dataConfig.lrConfig.val,
				mbConfig: this.dataConfig.mbConfig.val,
				imgUrl: this.dataConfig.imgConfig.url,
				priceShow: this.dataConfig.priceShow.val,
				discountShow: this.dataConfig.discountShow.val,
				titleShow: this.dataConfig.titleShow.val,
				seckillShow: this.dataConfig.seckillShow.val,
				conStyle: this.dataConfig.conStyle.type,
				prConfig: this.dataConfig.prConfig.val,
				bgColor: this.dataConfig.bgColor.color[0].item
			};
		},
		created() {},
		mounted() {
			this.getSeckillIndexTime();
			console.log(this.themeColor,'themeColor');
		},
		methods: {
			getSeckillIndexTime() {
				let limit = this.$config.LIMIT;
				let params = {
					page: 1,
					limit: this.numberConfig >= limit ? limit : this.numberConfig,
					type: 'index'
				}
				getSeckillIndexTime().then(res => {
					if (res.data.seckillTimeIndex === -1) {
						return;
					}
					this.datatime = res.data.seckillTime[res.data.seckillTimeIndex].stop
					let id = res.data.seckillTime[res.data.seckillTimeIndex].id
					getSeckillList(id, params).then(({
						data
					}) => {
						data.forEach((item) => {
							let num = 0
							if (item.price > 0 && item.ot_price > 0) num = ((parseFloat(item
								.price) / parseFloat(item.ot_price)).toFixed(
								2))
							item.discountNum = this.$util.$h.Mul(num, 10)
						})
						this.spikeList = data
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.spike {
		
		// padding: 20rpx;
	}
	.time_img{
		width: 30%;
		text-align: center;
		image{
			margin: 0 auto;
			width: 150rpx;
			height: 220rpx;
		}	
	}
	
	.hot_image {
		list-style: none;
		height: 40rpx;
		width: 300rpx;
		position: absolute;
		right: 20rpx;
		z-index: 999;
		bottom: 0;
	}
	.index_time{
		display: flex;
		width: 100%;
	}
	.time_info{
		width: 70%;
		padding-top: 20rpx;
		.time_info_name{
			font-size: 30rpx;
			height: 100rpx;
		}
		.time_price{
			width: 50%;
			font-size: 32rpx;
		}
		.time_btn{
			width: 50%;
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #C6A46E;
			color: #333333;
			border-radius: 3rpx;
			position: absolute;
			right:20rpx;
			top: 10rpx;
		}
	}
	.spike-box {

		overflow: hidden;
		box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.04);

		.hd {
			height: 80rpx;
			line-height: 80rpx;
			padding-left:20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background-color: #292E35;
			position: relative;
			.left {
				display: flex;
				align-items: center;
				width: 500rpx;

				.name {
					font-size: 32rpx;
					font-weight: 600;
					color: #F0E2C4;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.title {
					width: 134rpx;
					height: 33rpx;
				}
			}

			.more {
				font-size: 26rpx;
				color: #999;

				.iconfont {
					margin-left: 6rpx;
					font-size: 25rpx;
				}
			}
		}

		.spike-wrapper {
			width: 100%;
			margin-top: 27rpx;
			margin-bottom: 20rpx;
			.spike-item {
				width: 95%;
				margin-left: 2.5%;
				background-color: #fff;
				padding-bottom: 8rpx;
				margin-top: 10rpx;
				.img-box {
					position: relative;
					height: 222rpx;

					image {
						width: 150rpx;
						height: 222rpx;
						border-radius: 16rpx;
					}

					.msg {
						position: absolute;
						left: 10rpx;
						bottom: 16rpx;
						width: 86rpx;
						height: 30rpx;
						background: rgba(255, 255, 255, 1);
						border: 1px solid rgba(255, 109, 96, 1);
						border-radius: 6rpx;
						font-size: 20rpx;
						color: $theme-color;
					}
				}


				.info {
					margin-top: 10rpx;
					padding: 0 10rpx;

					.name {
						font-size: 26rpx;
					}

					.price-box {
						display: flex;
						align-items: center;
						justify-content: start;
						margin-top: 4rpx;

						.tips {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 28rpx;
							height: 28rpx;
							background-color: $theme-color;
							color: #fff;
							font-size: 20rpx;
							border-radius: 2px;
						}

						.price {
							display: flex;
							margin-left: 10rpx;
							color: $theme-color;
							font-size: 28rpx;
							font-weight: bold;

							text {
								font-size: 18rpx;
							}
						}
					}
				}
			}
		}
	}
</style>